<template>
  <div class="malltype">
    <div class="malltype-top">
      <span class="malltype-top_title">
        商城频道
        <p></p>
      </span>
    </div>
    <div class="malltype-bottom">
      <van-row>
        <van-col span="10" style="malltype-bottom_left">
          <img src="@/assets/img/malltype01.png" alt />
        </van-col>
        <van-col span="14" style="malltype-bottom_right">
          <div class="malltype-bottom_right_top">
            <img src="@/assets/img/malltype02.png" alt />
          </div>
          <div class="malltype-bottom_right_bot">
            <img src="@/assets/img/malltype03.png" alt />
          </div>
        </van-col>
        <van-col span="24">
          <img src="@/assets/img/malltype04.png" alt />
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.malltype {
  &-top {
    padding: 0 15px;
    box-sizing: border-box;
    margin: 15px 0;

    &_title {
      padding: 0 8px;
      color: #333;
      font: 18px "微软雅黑";
      position: relative;
      z-index: 1;
      p {
        content: "";
        z-index: -1;
        position: absolute;
        width: 86px;
        height: 0.2962963rem;
        left: 0;
        bottom: 0;
        box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
          rgba(131, 241, 219, 0.59);
        background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
          linear-gradient(#94ffc4, #94ffc4);
      }
    }
  }
  &-bottom {
    img {
      width: 100%;
    }
    &_right {
      &_top {
        margin-top: 4px;
      }
      &_bot {
        margin-top: 8px;
      }
    }
  }
}
</style>